<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>房源内容信息</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 引入YDUI样式 -->
    <link rel="stylesheet" href="../build/css/ydui.css" />
	<link rel="stylesheet" href="../css/Index.css" />
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" href="../css/contentdetails.css" />
	<link rel="stylesheet" href="../css/fontcss/css/font-awesome.min.css" />
	<link href="../css/viewer.min.css" rel="stylesheet">
</head>
<body>
	<section class="g-flexview">
		<!-- 顶部内容 -->
		<header class="m-navbar">
			<a href="#" onClick="javascript :window.history.back(); return false;" class="navbar-item">
				<i class="back-ico"></i>
			</a>
			<div class="navbar-center">
				<span class="navbar-title"></span>
			</div>
		</header>
		
		<!-- 主体内容 -->
		<div class="g-scrollview">
			<!-- banner 图 -->
			<div class="m-slider" >
				<div class="slider-wrapper" id="bannerImage"></div>
				<div class="slider-pagination"></div><!-- 分页标识 -->
			</div>
			<!-- banner图下的所有信息展示 -->
			<div id="main-content">
				<div class="desc-top">
					<div class="info">
						<ul>
							<li><input class="housename" value="" name="housetitle" readonly="readonly"  /><span><a class="houseprice"></a>&nbsp;元&nbsp;/&nbsp;㎡</span></li>
							<li><label>开盘时间：</label><input style="width:calc(100% - 65px);" value="" name="opentime" readonly="readonly"  /></li>
							<li><label>房源地址：</label><input style="width:calc(100% - 65px);overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" value="" name="houseadress" readonly="readonly"  /></li>
						</ul>
					</div>
					<div class="yongjinplan">
						<h6 style="padding:.5rem 0 0 0;">佣金方案(%)</h6>						
						<div class="plan-list"></div>						
					</div>
				</div>
				<!-- 佣金方案下面 -->
				<div class="desc-text">
					<div class="li-list" id="operlist">
						<ul>
							<li><label>开发商：</label><input style="width: 80%;" value="" name="developer" readonly="readonly"  /></li>
							<li><label>地区：</label><input value="" name="areaname" readonly="readonly"  /></li>
							<li><label>绿化率：</label><input value="" name="greening_rate" readonly="readonly"  /></li>
							<li><label>车位数量：</label><input value="" name="parking_space" readonly="readonly"  /></li>
							<li><label>占地面积(㎡)：</label><input value="" name="floor_area" readonly="readonly"  /></li>
							<li><label>物业费(元/㎡)：</label><input value="" name="property_costs" readonly="readonly"  /></li>
							<li><label>物业公司：</label><input style="width: 80%;" value="" name="property_company" readonly="readonly"  /></li>
							<li><label>装修类型：</label><input style="width: 80%;" value="" name="style" readonly="readonly"  /></li>
						</ul>
					</div>
					<!-- 主要户型 -->
					<div class="main-style">
						<h6>主要户型</h6>
						<ul id='roomap'></ul>
						</br>
					</div>
					<!-- 项目介绍 -->
					<div class="pro-desc">
						<h6>项目介绍</h6>
						<P class="content" id="content"></p>
						<script id="contentscript" type="text/html">
							{{#data.detail}}
						</script>
					</div>
				</div>
			</div>
			
		</div>
		<!-- 报备客户按钮 -->
		<a href="javascript:void(0)">
			<div id="preparation">报备</div>
		</a>
</section>
	<script src="../js/jq331.min.js"></script>
  <script src="../build/js/ydui.flexible.js"></script>
	<script src="../build/js/ydui.js"></script>
	<script src="../js/viewer.min.js"></script>	
	<script src="../js/template.js"></script>
	<script src="../js/common.js"></script>
	<!-- <script src="../js/Index.js"></script> -->
	<!-- 轮播图 -->
	<script id="topbannerscript" type="text/html">
		{{each data as value index}}
			<div class="slider-item">
				<a href="javascript:void(0);">
					<img data-original="{{data[index].img_url}}" data-id="{{data[index].img_id}}" src="{{data[index].img_url}}">
				</a>
			</div>
		{{/each}}
	</script>
	
	<!-- 户型图 -->
	<script id="roomimg" type="text/html">
		{{each dataimg as value index}}
			<li><img data-original="{{dataimg[index].img_url}}" src="{{dataimg[index].img_url}}" /></li>
		{{/each}}
	</script>
	
	<!-- 佣金方案 -->
	<script id="cashplan" type="text/html">
		{{each dataplan as value index}}
			<div class="item-list">
				<div>{{dataplan[index].house_area}}㎡&nbsp;<a>{{dataplan[index].house_type}}</a></div>				
				<div>佣:￥{{dataplan[index].price}}</div>
				<div class="rmb">普通:￥{{dataplan[index].price * dataplan[index].public_percentage/100}}</div>
				<div class="rmb">门店:￥{{dataplan[index].price* dataplan[index].store_percentage/100}}</div>
			</div>	
		{{/each}}
	</script>
	
	<script>
		$(document).ready(function(){		
			var getdetailsApi = commapi + "house/info"; //详情信息
			var infoid = params.id;
			$.ajax({
					url: getdetailsApi,
					type: 'GET',									
					data: {'id': infoid},											
					success: function (ret) {
						console.log(ret);
						var html = template('topbannerscript', {data: ret.head_img});
						$('#bannerImage').html(html);
						var viewer = new Viewer(document.getElementById('bannerImage'), { //轮播图片点击放大预览
									url: 'data-original'
							});
						$('.m-slider').slider({
								speed: 200,
								autoplay: 5000,
								lazyLoad: true
						});
						var html = template('cashplan', {dataplan: ret.brokerage_plan.data});
						$('.plan-list').html(html);
						$("input[name='housetitle']").val(ret.title);
						$('.navbar-title').html(ret.title);
						$("input[name='opentime']").val(ret.opening_time);
						$("input[name='houseadress']").val(ret.house_address);
						$('.houseprice').html(ret.house_price);						
						$("input[name='developer']").val(ret.developer);
						$("input[name='areaname']").val(ret.area.name);
						$("input[name='greening_rate']").val(ret.greening_rate+'%');
						$("input[name='parking_space']").val(ret.parking_space);
						$("input[name='floor_area']").val(ret.floor_area);
						$("input[name='property_costs']").val(ret.property_costs);
						$("input[name='property_company']").val(ret.property_company);
						var stylelist = ret.decoration_type;
						$("input[name='style']").val(stylelist.join('、'));
						var html = template('roomimg', {dataimg: ret.room_map});
						$('#roomap').html(html);						
						var html = template('contentscript', {data: ret});
						$('#content').html(html);						
						var viewer = new Viewer(document.getElementById('roomap'), { //图片点击放大预览
									url: 'data-original'
							});																									
							if(ret.brokerage_plan.length == 0){
								$('.yongjinplan').hide();
							}																															
							//点击报备.把楼盘名称带过去
							$('#preparation').click(function(){
								location.href="../pages/reportecustomers/index.html?name=" + encodeURI(ret.title) +"&houseid=" + ret.id
							});							
							localStorage.setItem('baobeineedareaname', ret.area.name);
							localStorage.setItem('baobeineedareaid', ret.area.id);
							localStorage.setItem('houseID', ret.id);						
					},					
				});
		});
	</script>
</body>
</html>